<template>
	<div class="ebook-slide-contents">
		<!-- 搜索区域 -->
		<div class="slide-contents-search-wrapper">
			<div class="slide-contents-search-input-wrapper">
				<!-- 搜索图标 -->
				<div class="slide-contents-search-icon">
					<span class="icon-search"></span>
				</div>
				<!-- 搜索框 -->
				<input class="slide-contents-search-input" type="text" v-model="searchText" :placeholder="$t('book.searchHint')" @keyup.enter.exact="search()" @click="showSearchPage">
			</div>
			<!-- 取消按钮 -->
			<div class="slide-contents-search-cancel" v-if="searchVisible" @click="hideSearchPage()">{{$t('book.cancel')}}</div>
		</div>
		<!-- 书本详情区域 -->
		<div class="slide-contents-book-wrapper"  v-show="!searchVisible">
			<!-- 书本的封面图 -->
			<div class="slide-contenys-book-img-wrapper">
				<img :src="cover" class="slide-contents-book-img">
			</div>
			<!-- 书本内容 -->
			<div class="slide-contents-book-info-wrapper">
				<div class="slide-contents-book-title">
					<span class="slide-contents-book-title-text">{{metadata.title}}</span>
				</div>
				<div class="slide-contents-book-author">
					<span class="slide-contents-book-author-text">{{metadata.creator}}</span>
				</div>
			</div>
			<!-- 阅读进度 -->
			<div class="slide-contents-book-progress-warpper">
				<div class="slide-contents-book-progress">
					<span class="progress">{{progress + '%'}}</span>
					<span class="progress-text">{{$t('book.haveRead2')}}</span>
				</div>
				<div class="slide-contents-book-time">{{getReadTimeText()}}</div>
			</div>
		</div>
		<scroll class="slide-contents-list" :top="156" :bottom="48" v-show="!searchVisible" ref="scroll">
			<div class="slid-contents-item" v-for="(item, index) in navigation" :key="index">
				<!-- 目录的标签信息 -->
				<span class="slide-contents-item-label" :class="{'selected': section === index }" :style="contentItemStyle(item)" @click="displayNavigation(item.href)">{{item.label}}</span>
				<span class="slide-contents-item-page">{{item.page}}</span>
			</div>
		</scroll>
		<scroll class="slide-search-list" :top="66" :bottom="48" v-show="searchVisible">
			<div class="slide-search-item" v-for="(item, index) in searchList" :key="index" v-html="item.excerpt" @click="displaySearch(item.cfi, true)"></div>
		</scroll>
	</div>
</template>

<script>
import { ebookMixin } from '../../utils/mixin'
import Scroll from '../common/Scroll'
import { px2rem } from '../../utils/utils' 
export default {
	mixins: [ebookMixin],
	components: {
		Scroll
	},
	data() {
		return {
			searchVisible: false, // 控制取消按钮的显示与隐藏
			searchList: null, // 搜索的结果
			searchText: '' // 搜索的文本
		}
	},
	methods: {
		// 点击切换到相应的页面
		displaySearch(target, highlight = false) {
			this.display(target, () => {
				this.hideTitleAndMenu()
				// 关键词高亮显示
				if (highlight) {
					this.currentBook.rendition.annotations.highlight(target)
				}
			})
		},
		search() {
			if (this.searchText && this.searchText.length > 0) {
				this.doSearch(this.searchText).then(list => {
					this.searchList = list
					// 设置搜索内容高亮显示
					this.searchList.map(item => {
						item.excerpt = item.excerpt.replace(this.searchText, `<span class="content-search-text">${this.searchText}</span>`)
						return item
					})
				})
			}
		},
		doSearch(q) { // 全文搜素功能的方法
			return Promise.all(this.currentBook.spine.spineItems.map(
				section => section.load(this.currentBook.load.bind(this.currentBook))
				.then(section.find.bind(section, q))
				.finally(section.unload.bind(section))))
				.then(results => Promise.resolve([].concat.apply([], results)))
			// [].concat.apply([], results)方法将将对维数组转换为一维数组
		},
		displayNavigation(target) {
			this.display(target, () => {
				// 页面渲染完成后关闭目录栏
				this.hideTitleAndMenu()
			})
		},
		// 设置二级和一级目录的缩进
		contentItemStyle(item) {
			return {
				marginLeft: `${px2rem(item.level * 15)}rem`
			}
		},
		showSearchPage() {
			// 点击显示取消按钮
			this.searchVisible = true
		},
		hideSearchPage() {
			// 点击隐藏取消按钮
			this.searchVisible = false
			this.searchText = '' // 清空搜索文本
			this.searchList = null // 清空搜索结果列表
		}
	}
}
</script>

<style lang="scss" rel="stylesheet/scss" scoped>
	// $ratio: 375 / 10;

	// @function px2rem($px) {
  //   @return $px / $ratio + rem;
	// }

	// @mixin center {
	// 	display: flex;
	// 	justify-content: center;
	// 	align-items: center;
	// }

	// @mixin left {
	// 	display: flex;
	// 	justify-content: flex-start;
	// 	align-items: center;
	// }

	// @mixin right {
	// 	display: flex;
	// 	justify-content: flex-end;
	// 	align-items: center;
	// }

	// @mixin ellipsis {
	// 	text-overflow: ellipsis;
	// 	overflow: hidden;
	// 	white-space: nowrap;
	// }

	// @mixin ellipsis2($line) {
	// 	display: -webkit-box;
	// 	-webkit-box-orient: vertical;
	// 	-webkit-line-clamp: $line;
	// 	white-space: normal;
	// 	overflow: hidden;
	// 	text-overflow: ellipsis;
	// 	word-break: keep-all;
	// }

	@import "../../assets/styles/global.scss";

	.ebook-slide-contents {
		width: 100%;
		font-size: 0;
		.slide-contents-search-wrapper {
			display: flex;
			width: 100%;
			height: px2rem(36);
			margin: px2rem(20) 0 px2rem(10) 0;
			padding: 0 px2rem(15);
			box-sizing: border-box;
			.slide-contents-search-input-wrapper {
				flex: 1;
				@include center;
				.slide-contents-search-icon {
					flex: 0 0 px2rem(28);
					font-size: px2rem(12);
					@include center;
				}
				.slide-contents-search-input {
					flex: 1;
					width: 100%;
					height: px2rem(32);
					font-size: px2rem(14);
					background: transparent;
					border: none;
					&:focus {
						// 取消选中边框
						outline: none;
					}
				}
			}
			.slide-contents-search-cancel {
				flex: 0 0 px2rem(50);
				font-size: px2rem(14);
				@include right;
			}
		}
		.slide-contents-book-wrapper {
			display: flex;
			width: 100%;
			height: px2rem(90);
			padding: px2rem(10) px2rem(15) px2rem(20) px2rem(15);
			box-sizing: border-box;
			.slide-contenys-book-img-wrapper {
				flex: 0 0 px2rem(45); 
				.slide-contents-book-img {
					width: px2rem(45);
					height: px2rem(60);
				}
			}
			.slide-contents-book-info-wrapper {
				flex: 1;
				padding: 0 px2rem(10);
				box-sizing: border-box;
				.slide-contents-book-title {
					// 375*0.85=318.75-30=288.75-20=268.75-45=233.75-70=153.75
					// 173.75-20=153.75
					// width: px2rem(153.75);
					font-size: px2rem(14);
					line-height: px2rem(16);
					@include left;
					.slide-contents-book-title-text {
						@include ellipsis2(3);
					}
					@include ellipsis2(3);
				}
				.slide-contents-book-author {
					// width: px2rem(153.75);
					font-size: px2rem(12);
					margin-top: px2rem(5);
					@include left;
					.slide-contents-book-author-text {
						@include ellipsis2(1);
					}
				}
			}
			.slide-contents-book-progress-warpper {
				flex: 0 0 px2rem(70);
				.slide-contents-book-progress {
					.progress {
						font-size: px2rem(14);
					}
					.progress-text {
						font-size: px2rem(12);
					}
				}
				.slide-contents-book-time {
					font-size: px2rem(12);
					margin-top: px2rem(5);
				}
			}
		}
		.slide-contents-list {
			padding: 0 px2rem(15);
			box-sizing: border-box;
			.slid-contents-item {
				display: flex;
				padding: px2rem(20) 0;
				box-sizing: border-box;
				.slide-contents-item-label {
					flex: 1;
					font-size: px2rem(14);
					// 让英文显示完整
					line-height: px2rem(16);
					@include ellipsis;
				}
				.slide-contents-item-page {
					flex: 0 0 px2rem(30);
          font-size: px2rem(10);
          @include right;
				}
			}
		}
		.slide-search-list {
			width: 100%;
			padding: 0 px2rem(15);
			box-sizing: border-box;
			.slide-search-item {
				font-size: px2rem(14);
				line-height: px2rem(16);
				padding: px2rem(20) 0;
				box-sizing: border-box;
			}
		}
	}
</style>
